<template>
  <view class="content">
    <view class="lineBox">
      <view v-for="item,index in line" :key="index" @tap="lineId = index">
        <view :class="{selectText:lineId == index}">{{item.name}}</view>
        <view class="selectItem" v-if="lineId == index">
        </view>
        <view class="selectNoItem" v-else>

        </view>
      </view>
    </view>
    <view class="tabBox">
      <map id="map" style="width: 100%; height: 450rpx;" :latitude="latitude" :longitude="longitude" show-location
        :markers="covers">

      </map>
      <view class="recenter-btn" @tap="queryMap">
        <image src="/static/systemIcon/query.png" />
      </view>
      <view class="recenter-btn2" @tap="recenterMap">
        <image src="/static/systemIcon/positioning.png" />
      </view>
      <view class="TabItem">
        <view class="TabItem-title">
          <view></view>
        </view>
        <view v-for="item,index in storeList" class="storeList" @tap="naVlist">
          <view class="isselect">
            <up-icon name="checkbox-mark" color="#fff" size="14"></up-icon>
          </view>
          <view class="isselectInfo">
            <view>
              <view class="storeName">{{item.storeName}}</view>
              <view class="NoID">
                <view>取餐机</view>
                <view>{{item.NoID}}</view>
              </view>
              <view class="streTime">
                <view>
                  <!-- clock -->
                  <up-icon name="clock" color="#CACACA" size="15"></up-icon>

                </view>
                <view>{{item.time}}</view>
              </view>
              <view class="storeAddress">
                <view>
                  <!-- clock -->
                  <image class="" src="/static/systemIcon/longitude.png">
                  </image>
                </view>
                <view>{{item.storeAddress}}</view>
              </view>

            </view>
            <view class=" goOrder">
              <view>去下单</view>
              <view>{{item.kilometer}}</view>
              <view class="goOrder-icon">
                <image class="" src="/static/systemIcon/mapIcon.png">

                </image>
              </view>
            </view>
          </view>
        </view>
        <view class="isselectInfo-bottom">-已经到底了-</view>

      </view>
    </view>

  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  onMounted(() => {
    uni.getLocation({
      type: 'gcj02', // 使用 GCJ-02 坐标系
      altitude: true,
      accuracy: 'best',
      success: function (res) {
        latitude.value = res.latitude;
        longitude.value = res.longitude;
        console.log(res);

      },
      fail: function (err) {
        console.error('定位失败:', err);
      }
    });
  })
  const latitude = ref(39.909)
  const longitude = ref(116.39742)
  const covers = ref([{
    id: 1,
    latitude: 30.2084,
    longitude: 120.21201,
    iconPath: '/static/icon.png',
    width: 50,
    height: 50
  }]);
  const lineId = ref(0);
  const line = ref([
    {
      name: "常去营业点",
    },
    {
      name: "附近营业点",
    }
  ]);
  const storeList = ref([{
    id: 1,
    latitude: latitude.value,
    longitude: longitude.value,
    iconPath: '/static/icon.png',
    width: 50,
    height: 50,
    storeName: "深圳坪山创新广场A栋-取餐机",
    NoID: "NO.D755Z268",
    time: "09:00-21:00 (周一至周六)",
    storeAddress: "广东省深圳市坪山区坪山大道2007号坪山创新广场A栋大堂",
    kilometer: "1020.8KM",

  }]);
  const naVlist = () => {
    uni.navigateTo({ url: '/activity/pages/meal/index' })
  }
  const recenterMap = () => {
    uni.getLocation({
      type: 'gcj02', // 使用 GCJ-02 坐标系
      success: function (res) {
        latitude.value = res.latitude;
        longitude.value = res.longitude;
        const mapCtx = uni.createMapContext('map')
        mapCtx.moveToLocation()
      },
      fail: function (err) {
        console.error('定位失败:', err);
      }
    });

  }
  const queryMap = () => {
    uni.navigateTo({ url: '/activity/pages/queryStore/index' });
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .lineBox {
    width: 100%;
    display: flex;
    background: #fff;

    >view {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 28rpx;
      color: #666666;

      .selectItem {
        width: 40rpx;
        height: 6rpx;
        background: #004635;
        margin-top: 15rpx;
      }

      .selectNoItem {
        width: 40rpx;
        height: 6rpx;
        margin-top: 15rpx;
      }

      .selectText {
        color: #333;
        font-weight: 600;
      }
    }
  }

  .tabBox {
    width: 100%;
    height: calc(100% - 60rpx);
    overflow: scroll;
    position: relative;

    .recenter-btn {
      position: absolute;
      top: 220rpx;
      right: 20rpx;
      width: 70rpx;
      height: 70rpx;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .recenter-btn2 {
      position: absolute;
      top: 300rpx;
      right: 20rpx;
      width: 70rpx;
      height: 70rpx;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .TabItem {
      height: calc(100% - 450rpx);
      overflow: scroll;
      background: #F8F8F8;
      border-radius: 35rpx 35rpx 0 0;
      margin-top: -38rpx;
      position: relative;
      z-index: 1;

      &-title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45rpx;

        >view {
          width: 75rpx;
          height: 6rpx;
          background: #D6D7D9;
        }
      }

      .storeList {
        height: 255rpx;
        background: #FFFFFF;
        margin: 0 25rpx;
        border-radius: 20rpx;
        border: 1px solid #005745;
        position: relative;
        overflow: hidden;

        .isselect {
          position: absolute;
          top: -4rpx;
          right: -4rpx;
          width: 35rpx;
          height: 35rpx;
          background: #005745;
          border-radius: 0 18rpx 0 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;

        }

        .isselectInfo {
          display: flex;
          margin: 25rpx;

          >view:nth-child(1) {
            flex: 1;
            padding-right: 30rpx;

            .storeName {
              font-size: 28rpx;
              font-weight: 600;
              margin-bottom: 15rpx;
            }

            .NoID {
              font-size: 22rpx;
              display: flex;

              >view:nth-child(1) {
                background: #BCA77A;
                color: #fff;
                padding: 0 8rpx;
                border-radius: 5rpx;

              }

              >view:nth-child(2) {
                background: #FFFFFF;
                color: #000;
                padding: 0 8rpx;
                border: 0.5px solid #E0D7C2;
                color: #BCA77A;
                border-radius: 5rpx;
              }
            }

            .streTime {
              display: flex;
              font-size: 24rpx;
              color: #666666;
              margin-top: 15rpx;
              align-items: center;

              >view:nth-child(1) {
                margin-right: 15rpx;
              }
            }

            .storeAddress {
              display: flex;
              font-size: 22rpx;
              color: #666666;
              margin-top: 15rpx;
              align-items: flex-start;

              >view:nth-child(1) {
                margin-right: 15rpx;
                margin-top: 3rpx;
                width: 47rpx;
                height: 30rpx;

                >image {
                  width: 100%;
                  height: 100%;
                }
              }
            }

          }

          .goOrder {
            width: 180rpx;
            border-left: 1px solid #E5E5E5;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 24rpx;

            >view:nth-child(1) {
              font-weight: 600;
              margin-bottom: 10rpx;

            }

            >view:nth-child(2) {
              font-size: 22rpx;
              color: #666;
            }

            &-icon {
              width: 35rpx;
              height: 35rpx;
              margin-top: 25rpx;

              >image {
                width: 100%;
                height: 100%;
              }
            }

          }


        }
      }

      .isselectInfo-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        color: #CCCCCC;
        margin-top: 25rpx;
      }
    }
  }
</style>